<template>
  <div class="app-container-10 container-f0f2f5 app-main system-sector-container">
    <div class=" container-fff app-container-15 app-ele-border-radius-0">
      <el-form :inline="true">
        <el-form-item label="部门名称">
          <el-input
            v-model="searchModel.sectorName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            @keyup.enter.native="getList"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchModel.status" placeholder="部门状态" clearable size="small">
            <el-option :key="1" label="正常" :value="1"></el-option>
            <el-option :key="2" label="停用" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList">搜索
          </el-button>
          <el-button type="primary" icon="el-icon-plus" size="small" @click="dialogAddSector=true">
            新增
          </el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-table
          :data="tableData"
          row-key="id"
          v-loading="loading"
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column prop="name" label="部门名称"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.status === 0 ? '正常':'关闭' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
          <el-table-column label="操作" align="right" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="$message.error('演示不支持该操作')">修改</el-button>
              <el-button size="mini" type="text" @click="$message.error('演示不支持该操作')">新增</el-button>
              <el-button v-if="scope.row.parentId != 0" size="mini" type="text" @click="$message.error('演示不支持该操作')">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>


    <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="添加部门"
      :visible.sync="dialogAddSector"
      width="500px"
    >
      <div class="dialog-content">
        <evue-form ref="addSectorForm" v-model="addSectorForm" :option="addSectorOption" @submit="submit">
          <template v-slot:parent>
            <el-cascader
              v-model="addSectorForm.parentId"
              :options="tableData"
              :props="{ checkStrictly: true,value:'id',label:'name' }"
              clearable></el-cascader>
          </template>
          <el-button size="small" @click="cancel" slot="menuBottom">取消</el-button>
        </evue-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import Sector from './sector'

  export default Sector
</script>
